<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面（css）</title>

    <style>
      *{
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
      }
      .cal1{
        width: 100%;
        height: 500px;
        background: url("../html/image/13.jpg");
        box-sizing: border-box;
        padding-top: 20px;
      }

      .cal2{
        width: 70%;
        height: 450px;
        border: 6px solid lightgray;
        background: white;
        margin: auto;
        padding: 15px;
      }

      .p1{
        font-size: 20px;
        color: lightpink;
      }

      .p2{
        font-size: 20px;
        color: gray;
      }
      .div01{
        float: left;
        margin: 10px;
      }

      .div02{
        width: 50%;
        float: left;
        text-align: center;
        margin-left: 5%;
      }
      table{
        margin: auto;
      }

      .div03{
        float: right;
        font-size: 14px;
        margin: 10px;
      }

      div a{
        color: deeppink;
      }

      .td-left{
        width: 20%;
        text-align: right;
        height: 45px;
      }
      .td-right{
        padding-left: 45px;
      }

      #username,#password,#email,#name,#tel,#birthday{
        width: 251px;
        height: 32px;
        border-color: lightgray;
        /*设置边框圆角*/
        border-radius: 5px;
        padding-left: 10px;
      }
      #checkcode{
            width: 120px;
            height: 32px;
            border-color: lightgray;
            /*设置边框圆角*/
            border-radius: 5px;
            padding-left: 5px;
          }
      #img_check{
        height: 32px;
        width: 100px;
        /*垂直居中*/
        vertical-align: middle;
      }
      #btn_sub{
        width: 150px;
        height: 30px;
        background-color: #98e7e7;
        border-radius: 5px;
        border-color: #98e7e7;
      }
    </style>

</head>
<body>

  <div class="cal1">
    <div class="cal2">
      <div class="div01">
        <p class="p1">新用户注册</p>
        <p class="p2">USER REGISTER</p>
      </div>

      <div class="div02">
        <form>
          <table>
            <tr>
              <td class="td-left"><label for="username">用户名</label></td>
              <td class="td-right"><input name="username" placeholder="请输入用户名" id="username"></td>
            </tr>
            <tr>
              <td class="td-left"><label for="password">密码</label></td>
              <td class="td-right"><input name="password" type="password" placeholder="请输入密码" id="password"></td>
            </tr>
            <tr>
              <td class="td-left"><label for="email">Email</label></td>
              <td class="td-right"><input name="email" type="email" placeholder="请输入Email" id="email"></td>
            </tr>
            <tr>
              <td class="td-left"><label for="name">姓名</label></td>
              <td class="td-right"><input name="name" placeholder="请输入真实姓名" id="name"></td>
            </tr>
            <tr>
              <td class="td-left"><label for="tel">手机号</label></td>
              <td class="td-right"><input name="tel" placeholder="请输入您的手机号" id="tel"></td>
            </tr>
            <tr>
              <td class="td-left">性别</td>
              <td class="td-right"><input name="gender" type="radio" value="male" checked> 男
                <input name="gender" type="radio" value="female"> 女</td>
            </tr>
            <tr>
              <td class="td-left"><label for="birthday">出生日期</label></td>
              <td class="td-right"><input name="birthday" type="date" id="birthday"></td>
            </tr>
            <tr>
              <td class="td-left"><label for="checkcode">验证码</label></td>
              <td class="td-right"><input name="checkcode" id="checkcode" placeholder="请输入验证码"> <img id="img_check" src="../html/image2/2.png"></td>
            </tr>
            <tr>
              <td colspan="2" align="center"><input type="submit" value="注册" id="btn_sub"></td>
            </tr>
          </table>
        </form>
      </div>

      <div class="div03">
        <p>已有账号？<a href="#">立即登录</a></p>
      </div>
    </div>
  </div>

</body>
</html>